<style lang="sass" scoped>
    .component-common-table{
        position: relative;
    }
</style>
<template>
    <div class="component-common-table">
        <div
            @scroll="scroll($event,'main')"
            class="component-main-table table-responsive">
            <slot name="table-body">
                请slot插入表格
            </slot>
        </div>
        <div
            v-show="show"
            :style="{position:'fixed',top:header+'px',height:theadHeight+'px','z-index':'99','overflow-y':'hidden',width:tableWidth+'px'}">
            <div
                @scroll="scroll($event,'new')"
                class="component-new-table table-responsive">
                <slot name="table-body">
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
import propsync from 'common/lib/mixin/propsync'

export default {
    mixins: [propsync],
    props: {
        header:{
            type:Number,
            default:50,
        }
    },
    data(){
        return{
            scrollLeft:0,
            show:false,
            scrollTop:0,//滚动条距离顶部高度
            tableWidth:0,//表格宽度，用来设置component-new-table的浮动时的宽度
            theadHeight:0,//表头高度
        }
    },
    watch: {
        'scrollTop'(val){
            //当列表滚动到底部且页面还能往下滚的时候，隐藏
            if(val > ( $('.table-responsive.component-main-table').offset().top + $('.table-responsive.component-main-table').height() - this.header - $('.table-responsive.component-main-table').find('tbody tr:last-child').height() )){
                this.show = false;
                return;
            }
            //判断component-new-table是否显示
            if(($('.table-responsive.component-main-table').offset().top-val) <= this.header){
                this.show = true;
            }else{
                this.show = false;
            }
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.tableWidth = $('.table-responsive.component-main-table').width() + ($(window).width()<768?2:0);//设置表格宽度
            this.theadHeight = $('.table-responsive.component-main-table thead').height();//设置表头高度
            $(window).resize(()=>{
                this.tableWidth = $('.table-responsive.component-main-table').width() + ($(window).width()<768?2:0);//设置表格宽度
                this.theadHeight = $('.table-responsive.component-main-table thead').height();//设置表头高度
            });
            $(window).scroll(()=>{
                this.scrollTop = document.body.scrollTop;//设置滚动条高度
            })
        })
    },
    methods: {
        //上下块左右移动
        scroll(e,type){
            if(type == 'main'){
                $('.table-responsive.component-new-table').scrollLeft(e.target.scrollLeft)
            }else{
                $('.table-responsive.component-main-table').scrollLeft(e.target.scrollLeft)
            }
        },
    }
}
</script>